<template>
    <div class="content">
        <div class="top">
            <div class="top-form">
                <el-input v-model="form.username" placeholder="用户账号" style="margin-left: 0"></el-input>
                <el-select
                        style="margin-left: 10px"
                        v-model="form.type"
                        clearable
                        placeholder="角色类型">
                    <el-option v-for="item in typeList"
                               :label="item.text"
                               :key="item.value"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        style="margin-left: 10px"
                        v-model="form.createtime"
                        type="daterange"
                        align="right"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        class="width-full">
                </el-date-picker>
                <el-button type="primary" @click="search" class="postButton" icon="el-icon-search">查询</el-button>
            </div>
        </div>

        <div class="contain">
            <div class="tab">
                <el-tabs type="border-card"  v-model="activeName">
                    <el-tab-pane label="登录日志" name="post" style='background-color:white'>
                        <div class="down-form">
                            <div class="table">
                                <el-table
                                        ref="logTable"
                                        :data="tableData"
                                        v-loading="loading"
                                        border
                                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                        style="width: 100%;font-size: 14px;color: #1f2d3d">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            align="center"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="username"
                                            label="登录账户"
                                            min-width="15%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="type"
                                            label="角色类型"
                                            min-width="15%"
                                            :formatter="typeFormatter"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="email"
                                            label="邮箱"
                                            min-width="20%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createtime"
                                            label="登录时间"
                                            min-width="30%"
                                            show-overflow-tooltip
                                            :formatter="dateFormat"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column prop=""
                                                     label="操作"
                                                     min-width="11%"
                                                     align="center">
                                        <template slot-scope="scope">
                                            <div style="margin-left: 3px">
                                                <el-button :plain="true"
                                                           size="mini"
                                                           style="font-size: 12px;color: #fff;background-color: #ff4949;border-color: #ff4949"
                                                           @click="deleteData(scope.row, scope.$index)"
                                                           type="danger">删除记录
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination @current-change="handleCurrentChange"
                                               layout="total, sizes,prev, pager, next, jumper"
                                               :current-page.sync="iPagination.current"
                                               :page-size='iPagination.pageSize'
                                               :page-sizes="iPagination.pageSizeOptions"
                                               :total="iPagination.total"
                                               background
                                               @size-change="handleSizeChange">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>


    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    export default {
        name: "loginLog",
        data(){
            return{
                activeName: 'post',
                form:{
                    username:'',
                    type: '',
                    createtime: '',
                },
                tableData: [],
                iPagination: {
                    current: 1,
                    pageSize: 9,
                    pageSizeOptions: [5, 9, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 9,
                },
                typeList: [
                    {
                        value: '1',
                        text: '管理员'
                    },
                    {
                        value: '2',
                        text: '普通用户'
                    }
                ],
                loading:false,
            }
        },
        created(){
            this.getLoginData()
        },
        methods:{
            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getLoginData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getLoginData()
            },
            // 获取登录日志列表
            getLoginData(){
                this.loading = true;
                const params = {...this.form.createtime};
                console.log(params,33);
                params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                this.$delete(params, 'createtime');
                this.$Axios({
                    url: '/users/getLoginData',
                    method: 'get',
                    data:{
                        username: this.form.username,
                        type: this.form.type,
                        startDate: params.startDate,
                        endDate: params.endDate,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
              this.getLoginData()
            },

            // 行内删除
            deleteData(row,index){
                this.$confirm('确定删除该条登录记录？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    this.$axiosToken({
                        url: '/users/delLoginData',
                        method: 'get',
                        data:{id: row.id},
                        success: (result) =>{
                            this.$message({
                                message: '删除日志记录成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getLoginData()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                })
            },


            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            // 状态转为文字
            typeFormatter(row,column){
                const type = row.type
                if (type == 1){
                    return '管理员'
                }else {
                    return '普通用户'
                }
            },
        }
    }
</script>

<style scoped>
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input{
        width: 21%;
        margin-left: 10px;
    }
    /deep/ .el-input__icon.el-range__icon.el-icon-date {
        line-height: 27px;
    }
    .el-select{
        width: 21%
    }
    .postButton{
        margin-left: 15px;
        width: 8%;
        font-size: 14px;
        color: #fff;
    }
    .tab{
        margin-top: 15px;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 5px;
    }
</style>